import React, { useState } from 'react'
import { Field, NumberKeyboard, hooks } from 'react-vant'
import { Button } from 'react-vant'
import './log.css'
import { useNavigate } from 'react-router-dom'
import { DownOutline } from 'antd-mobile-icons'
export default function Deng() {
	// const [state, set] = hooks.useSetState({v1: false})

	let [in1,setin1] = useState('')
	

	const [state, set] = hooks.useSetState({
		visible: false,
		value: '',
	  })

	const l = () => {
	    
	}

	let [kong,setkong] = useState(true)
	const tt = (v) => {
	    setin1(v)
		if(v.length==11){
			setkong(false)
		}else{
			setkong(true)
		}
	}

	let ta = useNavigate() // 跳转
	const deng = () => {
	    // sessionStorage.setItem('token',123)
		ta('/yan?phone='+in1)
		
	}
  return (
    <div className='deng'>
		<div>
			<div className='deng-title'>登录验证</div>
			<div>
				<img src="../public/login-4.png" className='deng-img1'  alt=" " />
			</div>

			<div className='deng-title1'>
				输入您的电话号码
			</div>
			
		</div>

		<div className='deng-input1'>
			<div className='deng-phone1'>
				<img src="../public/组件@1x.png" className='deng-img12' alt="" />
				<span className='deng-sp1'>+86</span>
				<span className='sp111'></span>
				<DownOutline className='deng-biao' />
			</div>

			<input type="text" className='deng-in1' value={in1} onChange={()=>l()} name="" id="" onClick={() => set({ visible: true })}/>

			<div className='deng-wen'>我们向您发送了一个验证码以验证您的电话号码</div>
		</div>

		<div>

      <NumberKeyboard
        // value={state.value}
        value={in1}
        visible={state.visible}
        maxlength={11}
        // onChange={v => setin1({ value: v })}
        onChange={(v)=>tt(v)}
        onBlur={() => set({ visible: false })}
      />
		</div>

		
		<div className={kong?'demo-button1':'demo-button'}>
			<span onClick={deng} className='deng-sp2'>发送</span>
		</div>
      
    </div>
  )
}
